<!DOCTYPE HTML>
<html lang="zh" style="font-size:100px">

<head>
    <meta charset="utf-8" />
    <title>分享组件测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <style>
        [data-role="shareWidget"]>.snsIcon:nth-child(n) {
            width: 0.4rem;
            height: 0.4rem;
            background-color: aquamarine
        }

        [data-role="shareWidget"]>.snsIcon:nth-child(2n) {
            width: 0.4rem;
            height: 0.4rem;
            background-color: cadetblue
        }
    </style>
</head>

<body>

    <div data-role="shareWidget">
        <div data-sns="weibo" class="snsIcon"></div>
        <div data-sns="qz" class="snsIcon"></div>
        <div data-sns="linkedin" class="snsIcon"></div>
        <div data-sns="fb" class="snsIcon"></div>
        <div data-sns="twitter" class="snsIcon"></div>
    </div>
    <script>
        var ShareWidget = function () {
            var _this = this;
            this.shareWidgetDOM = document.querySelectorAll('[data-role="shareWidget"]');

            this.snsURL = {
                "weibo": "http://service.weibo.com/share/share.php?title={{shareTitle}}&url={{currentURL}}",
                "qz": "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{currentURL}}&title={{shareTitle}}&summary=",
                "linkedin": "http://www.linkedin.com/shareArticle?mini=true&ro=true&url={{currentURL}}&title={{shareTitle}}&summary=",
                "fb": "https://www.facebook.com/share.php?u={{currentURL}}&t={{shareTitle}}&pic=",
                "twitter": "https://twitter.com/intent/tweet?text={{shareTitle}}&url={{currentURL}}"
            }
            this.currentURL = encodeURI(location.href);
            this.shareTitle = encodeURI(document.title);

            this.eventTodo = function (e) {
                var snsType = e.target.getAttribute("data-sns");
                if (snsType) {
                    var shareURL = this.snsURL[snsType].replace("{{shareTitle}}", this.shareTitle).replace("{{currentURL}}", this.currentURL);
                    window.open(shareURL, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=640, height=480");
                }
            }

            for (let i = 0; i < this.shareWidgetDOM.length; i++) {
                this.shareWidgetDOM[i].addEventListener('click', this.eventTodo.bind(_this), false);
            };
        }

        ShareWidget();

    </script>

</body>